<template>
	<view class="content">
		<!-- 搜索 -->
		<u-sticky>
			<view class="search" @click="navSearch">
				<u-search placeholder="寻找感兴趣的商品" v-model="keyword" :clearabled="true" :disabled="true" focus :show-action="false"></u-search>
			</view>
		</u-sticky>
		<view class="centen">
			<!-- 轮播 -->
			<view class="swiper">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for='(item,index) in bannerList' :key='index'>
						<image class="swiper-image" :src="item.uri" @click="gomeetplace(item)"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 商品列表 -->
			<categoryList :gridList="gridList"></categoryList>

			<!-- 好物推荐 -->
			<itemRecommend :banner="itemrecommend.banner" :bannerImg="itemrecommend.bannerImg" :status="3"></itemRecommend>

			<!-- 拼团专区 -->
			<groupSpecial :swiperList="swiperList"></groupSpecial>

			<!-- 猜你喜欢 -->
			<guessLike :commodityList="commodityList"></guessLike>

			<!-- 没有了 -->
			<view class="no">
				没有更多了
			</view>
		</view>
		<!-- 广告 -->
		<view class="footer">
			<image src="http://img56.ddimg.cn/178320136771906_y.jpg" mode=""></image>
		</view>

		<view class='layer' v-if="show">
			<image src='../../static/index/can-ling.png'></image><!-- 广告图片-->
			<view class='close' @tap='closelaye'>
				<image src="../../static/index/cancel.png" mode=""></image>
			</view><!--  关闭按钮-->
		</view>
	</view>
</template>

<script>
	import categoryList from "../../components/index/category-list.vue"
	import itemRecommend from "../../components/index/item-recommend.vue"
	import groupSpecial from "../../components/index/group-special.vue"
	import guessLike from "../../components/index/guess-like.vue"
	import json from "../../json/index.js"
	export default {
		components: {
			categoryList,
			itemRecommend,
			groupSpecial,
			guessLike
		},
		data() {
			return {
				show: true,
				time: 3, //控制时间
				keyword: '',
				bannerList: [],
				gridList: [],
				itemrecommend: {},
				swiperList: [],
				commodityList: []
			}
		},
		onLoad() {
			this.bannerList = json.bannerList;
			this.gridList = json.gridList;
			this.itemrecommend = json.itemrecommend;
			this.swiperList = json.swiperList,
				this.commodityList = json.commodityList
		},

		methods: {
			// #ifdef MP
			//小程序环境下点击搜索框
			navSearch() {
				uni.navigateTo({
					url: '/pages/index/search/search'
				})
			},
			// #endif
			// 关闭弹窗
			closelaye() {
				this.show = false
				// localStorage.setItem("show", "true");
			},

			gomeetplace(val) {
				// this.$jump('/pages/tabs/index/meetingplace?id='+val.id)
				uni.showToast({
					title: '点击跳转',
				});
			},
			// querydata(){
			// 	request请求与mock模拟数据互通
			// 	uni.request({
			// 		url:'/api/load',
			// 		method:'GET',
			// 		success: (res) => {
			// 			console.log(res)
			// 		}
			// 	})
			// },
		}

	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;

		.search {
			background-color: #ffffff;
			padding: 28rpx;
		}

		.centen {
			padding: 0 21rpx;

			.swiper {
				width: 100%;
				height: 100%;

				swiper {
					padding: 18rpx 0;

					image {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}
				}
			}

			.no {
				line-height: 68rpx;
				color: #A3A3A3;
				font-size: 20rpx;
				text-align: center;
			}
		}

		.footer {
			padding: 0 22rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 279rpx;
				border-radius: 15rpx;
				display: block;
			}
		}

		.layer {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0px;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 520rpx;
				height: 600rpx;
			}
		}

		/* 图片样式*/

		/*关闭按钮样式 */
		.close {
			width: 60rpx;
			height: 60rpx;
			overflow: hidden;
			text-align: center;
			position: absolute;
			bottom: 18%;


			image {
				width: 100%;
				height: 100%;
				display: block;

			}
		}
	}
</style>
